<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html; charset=UTF-8" %>

<script>
    jQuery(function ($) {
        let $drag, $drop; // drag:被拖拽的行，drop:目标位置
        $("tbody tr").on("dragstart", function (e) {
            $drag = $(e.currentTarget); // 记录被拖拽的元素
        }).on("dragenter", function (e) {
            // 限定近在相同类型下才记录目标位置
            if ($(e.currentTarget).data("type") == $drag.data("type")) {
                $drop = $(e.currentTarget); // 记录拖拽到的目标位置
            }
        }).on("dragend", function () {
            if ($drag.index() == $drop.index()) return;
            if ($drag.index() < $drop.index()) {
                // detach:删除元素，保留事件，返回被删除的元素
                $drag.detach().insertAfter($drop);
            } else {
                $drag.detach().insertBefore($drop);
            }

            // 纠正序号和背景色
            $("tbody tr").each(function () {
                let index = $(this).index(); // 当前行在同辈元素中的索引
                $(this).find("td:eq(1)").text(index + 1);
            });

            // 纠正排序号
            let type = $drag.data("type");
            $("tbody tr[data-type=" + type + "]").each(function (i) {
                $(this).find("td:eq(4)").text(i + 1);
            })

            // 后端修改排序号
            let ids = $(":checkbox[data-type=" + type + "]").map(function () {
                return this.value;
            }).get().join(",");

            $.ajax('/value/dragChangeOrderNo?ids=' + ids);
        });

        // 编辑按钮事件
        $("#editBtn").click(function () {
            let $selected = $(":checkbox[name=id]:checked");
            if ($selected.size() != 1) {
                alert("必须且只能选择一个！");
                return;
            }
            //location.href = "/value/edit.html?id="+$selected.val();
            loadMain("/value/edit.html?id="+$selected.val())
        });

        // 删除按钮事件
        $("#delBtn").click(function () {
            let $selected = $(":checkbox[name=id]:checked");
            let ids = $selected.map(function () {
                return this.value;
            }).get().join(",");

            if(confirm("确定删除吗？")) {
                //location.href = "/value/delete?ids=" + ids;
                loadMain("/value/delete?ids=" + ids)
            }
        });

        /*$("#selectAll").click(function () {
            $(":checkbox[name=id]").prop("checked", this.checked);
        });

        $(":checkbox[name=id]").click(function () {
            $("#selectAll").prop("checked", $(":checkbox[name=id]:not(:checked)").size() == 0);
        });*/
    })
</script>

<div class="page-header">
    <h3>字典值列表</h3>
</div>
<div class="btn-toolbar" role="toolbar" style="height:50px;">
    <button class="btn btn-primary" url="/value/save.html">
        <span class="glyphicon glyphicon-plus"></span> 创建
    </button>
    <button class="btn btn-default" id="editBtn">
        <span class="glyphicon glyphicon-edit"></span> 编辑
    </button>
    <button class="btn btn-danger" id="delBtn">
        <span class="glyphicon glyphicon-minus"></span> 删除
    </button>
</div>

<div>
    <table class="table table-hover table-striped">
        <thead>
        <tr style="background-color:#d9edf7">
            <th><input id="selectAll" type="checkbox"/></th>
            <th>序号</th>
            <th>字典值</th>
            <th>文本</th>
            <th>排序号</th>
            <th>字典类型</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${values}" var="value" varStatus="sta">
        <tr draggable="true" data-type="${value.typeCode}">
            <td><input name="id" data-type="${value.typeCode}" value="${value.id}" type="checkbox"/></td>
            <td>${sta.count}</td>
            <td>${value.value}</td>
            <td>${value.text}</td>
            <td>${value.orderNo}</td>
            <td>${value.type.name}</td>
        </tr>
        </c:forEach>
        </tbody>
    </table>
</div>